<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="console.log('body loaded')">
<img src="../08.对象类与面向对象编程/images/8-4-继承实现.jpg" onload="console.log('Img loaded')" width="300"/>
<script>
    /*
        用户界面事件
            - load
            - unload
            - abort
            - error
            - select
            - resize
            - scroll
     */

    /*
        1. load事件
     */
    // 第一种   推荐
    window.addEventListener('load', e => {
        console.log('window loaded')
    })

    // 第二种  看第七行body

    // 第三种  在img上

    /*
        2.unload事件
            - unload 事件一般是 在从一个页面导航到另一个页面时触发
     */
    // 第一种
    window.addEventListener("unload", (event) => {
        console.log("Unloaded!");
    });
    // 第二种
    // <body onunload="console.log('Unloaded!')">


    /*
        3.resize事件
            会在窗口 缩放超过1像素时触发resize事件
            注意节流
     */

    window.addEventListener("resize", (event) => {
        console.log("Resized");
    });

    /*
        4.scroll事件
     */
    window.addEventListener("scroll", (event) => {
        if (document.compatMode == "CSS1Compat") {
            27
            console.log(document.documentElement.scrollTop);
        } else {
            console.log(document.body.scrollTop);
        }
    });

</script>
</body>
</html>